<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>用户邮件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	html{width: 98.5% !important;}
		body{
        	background:transparent;
   			 }
   		.form-control{width:auto;}
   		.control{width:100% !important}
   		.strange{width:auto}
   		.th-inner {background-color:#f4f4f4}
   		section{
    		margin:0px 20px;
    	}
    </style>
</head>
<body>
	<section class="content-header">
		<h4>用户邮件</h4>
	</section> 
	<section class="content table-content">
		<form class="form-horizontal" >
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<label for="email_to" class="control-label col-sm-4">发送至：</label>
						<input type="text" id="email_to" class="form-control col-sm-8"></input>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label for="email_subject" class="col-sm-4 control-label">主题：</label>
						<input type="text" id="email_subject" class="form-control col-sm-8"></input>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">发送日期：</label>
						<div class="col-sm-4 date form_date " >
							<input type="text" class="form-control control" id="date" placeholder="起始日期" />
						</div>
						<div class="col-sm-4 " >
							<input type="text" class="form-control control" id="dateEnd" placeholder="结束日期" />
						</div>
					</div>
				</div>
				<div >
					<button type="button" id="editBtn" class="btn btn-primary" onclick="query()"><span class="glyphicon glyphicon-search"></span>查询</button>
				</div>
			</div>
			
		</form>
		<table id="dataGrid">
		</table>
	</section>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
	//初始化
	$(function(){
		initDataGrid();
	});
	function initDataGrid(){
		//创建bootstraptable
		$("#dataGrid").bootstrapTable({
			method:"get",
			cache: false,         
			//缺失无法执行queryParams,传递Page参数
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			url : "/gradesign/email/query",
			queryParams : queryParam,
			pagination : true,//显示分页条：页码，条数等
			striped : true,//隔行变色
			pageNumber : 1,//首页页码
			pageSize : 10,//分页，页面数据条数
			pageList: [10,20,30,40],
			uniqueId : "id",//Indicate an unique identifier for each row
			sidePagination : "server",//在服务器端分页
			height:dataGrid.height,
			toolbar : "#toolbar",//工具栏
			columns : [{
				checkbox : "true",
				field : "box",
				width : 50
			},{
				title : "Id",
				field : "id",
				visible : false
			},{
				title : "发送给",
				field : "email_to"
			},{
				title : "主题",
				field : "email_subject"
			},{
				title : "内容",
				field : "email_content"
			},{
				title : "发送时间",
				field : "created_time"
			},{
				title : "是否已读",
				field : "readed"
			},{
				title : "操作",
				field : "operation",
				/* events : operateEvents, */
				formatter : function(value,row,index){
					return ['<button type="button" id="readed" class="btn btn-default" onclick="changeEmailReaded()"><span class="glyphicon glyphicon-eye-open"></span> 已读</button>'+
						'<button type="button" id="delete" class="btn btn-default" onclick="deleteEmail()"><span class="glyphicon glyphicon-trash"></span> 删除</button>'].join('');
				}
			}],
		});
	}
	function changeEmailReaded(){
		debugger;
		var row = $("#dataGrid").bootstrapTable('getSelections')
		var id = row[0].id;
		var params = {};
		params.id= id;
		$.ajax({
			url : "/gradesign/email/changeReaded",
			data : params,
			method : "post",
			dataType : "json",
			success : function(data){
				if(data.result = "success")	{
					$("#dataGrid").bootstrapTable('destroy');
					initDataGrid();
				}
			}
		})
	}
	function deleteEmail(){
		debugger;
		var row = $("#dataGrid").bootstrapTable('getSelections')
		var id = row[0].id;
		var params = {};
		params.id= id;
		$.ajax({
			url : "/gradesign/email/deleteEmail",
			data : params,
			method : "post",
			dataType : "json",
			success : function(data){
				if(data.result = "success")	{
					queryDataGrid();
				}
			}
		})
	}
	function queryParam(params){
		var param = {
				limit : this.limit,//页面大小
				offset : this.offset,//页码
				pageNumber : this.pageNumber,
				pageSize : this.pageSize,
				sortName : this.sortName,
				sortOrder : this.sortOtder
		};
		return param;
	};
	function queryDataGrid(){
		var params = {};
		params.item = $("#item").val();
		//创建bootstraptable
		$("#dataGrid").bootstrapTable('destroy');
		$("#dataGrid").bootstrapTable({
			method:"get",
			cache: false,         
			//缺失无法执行queryParams,传递Page参数
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			url : "/gradesign/email/query",
			queryParams : conditionQuery,
			pagination : true,//显示分页条：页码，条数等
			striped : true,//隔行变色
			pageNumber : 1,//首页页码
			pageSize : 10,//分页，页面数据条数
			pageList: [10, 20, 30, 40],
			uniqueId : "id",//Indicate an unique identifier for each row
			sidePagination : "server",//在服务器端分页
			height:dataGrid.height,
			sortName : "created_at",
			toolbar : "#toolbar",//工具栏
			columns : [{
				title : "Id",
				field : "id",
				visible : false
			},{
				title : "发送给",
				field : "email_to"
			},{
				title : "主题",
				field : "email_subject"
			},{
				title : "内容",
				field : "email_content"
			},{
				title : "发送时间",
				field : "created_time"
			},{
				title : "是否已读",
				field : "readed"
			},{
				title : "操作",
				field : "operation",
				/* events : operateEvents, */
				formatter : function(value,row,index){
					return ['<button type="button" id="readed" class="btn btn-default" onclick="changeEmailReaded()"><span class="glyphicon glyphicon-eye-open"></span> 已读</button>'+
						'<button type="button" id="delete" class="btn btn-default" onclick="deleteEmail()"><span class="glyphicon glyphicon-trash"></span> 删除</button>'].join('');
				}
			}],
		});
	}
	function query(){
		var params = {};
		queryDataGrid();
	}
	function conditionQuery(params){
		var param = {
				limit : this.limit,//页面大小
				offset : this.offset,//页码
				pageNumber : this.pageNumber,
				pageSize : this.pageSize,
				sortName : this.sortName,
				sortOrder : this.sortOtder,
				email_to : $("#email_to").val(),
				email_subject : $("#email_subject").val(),
				date : $("#date").val(),
				dateEnd : $("#dateEnd").val()
		};
		return param;
	}
	$('#date').datetimepicker({
		format: "yyyy-mm-dd",
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    minView: 2,
	    forceParse: 0,
	    todayHighlight: true
	});
	$('#dateEnd').datetimepicker({
		format: "yyyy-mm-dd",
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    minView: 2,
	    forceParse: 0,
	    todayHighlight: true
	});
</script>
</html>